﻿@using UsedBookTradeSystem.Models.Entity;
@using UsedBookTradeSystem.Models.Enum;
@{
   
    ViewData["Title"] = "商城列表";
}
<section class="py-5 bg-light">
    <div class="container">
    <div class="row px-4 px-lg-5 py-lg-4 align-items-center">
        <div class="col-lg-6">
        <h1 class="h2 text-uppercase mb-0">商城页面</h1>
        </div>
        <div class="col-lg-6 text-lg-end">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-lg-end mb-0 px-0 bg-light">
            <li class="breadcrumb-item active" aria-current="page">Shop</li>
            </ol>
        </nav>
        </div>
    </div>
    </div>
</section>
<section class="py-5">
    <div class="container p-0">
        <div class="row">
            <!-- SHOP SIDEBAR-->
            <div class="col-lg-3 order-2 order-lg-1">
                    <h5 class="text-uppercase mb-4">书籍类别</h5>
            <ul class="list-unstyled small text-muted ps-lg-4 font-weight-normal">
                    <li class="mb-2"><a class="reset-anchor" href="/Home/Shop">全部</a></li>
                    @foreach (BookCategory category in ViewBag.CategoryList)
                    {
                        <li class="mb-2"><a class="reset-anchor" href="/Home/Shop?CategoryId=@category.Id">@category.CategoryName</a></li>
                    }
            </ul>
            </div>
            <!-- SHOP LISTING-->
            <div class="col-lg-9 order-1 order-lg-2 mb-5 mb-lg-0">
                <div class="row mb-3 align-items-center">
                    <div class="col-lg-6 mb-2 mb-lg-0">
                    <p class="text-sm text-muted mb-0">共有 @ViewBag.BookInfoList.Count 个结果</p>
                    </div>
                </div>
                <div class="row">
                    <!-- PRODUCT-->
                    @foreach (BookInfo bookInfo in ViewBag.BookInfoList)
                    {
                        <div class="col-lg-4 col-sm-6">
                            <div class="product text-center">
                                <div class="mb-3 position-relative">
                                    <div class="badge text-white bg-"></div><a class="d-block" href="/ShopBook/Detail?id=@bookInfo.Id"><img class="img-fluid w-100" style="width:230x;height:310px;" src="@bookInfo.Picture" alt="..."></a>
                                    <div class="product-overlay">
                                        <ul class="mb-0 list-inline">
                                            <li class="list-inline-item m-0 p-0">
                                                @Html.ActionLink("添加至购物车", "AddCart", "Cart", new { bookId = bookInfo.Id, time = 1 }, new { @class = "btn btn-sm btn-dark" })
                                            <li class="list-inline-item mr-0"><a class="btn btn-sm btn-outline-dark" href="#productView" data-bs-toggle="modal" onclick="setModalValues('@bookInfo.Id','@bookInfo.BookName','@bookInfo.Picture','@bookInfo.BookDetail','@bookInfo.Price','@bookInfo.Inventory')"><i class="fas fa-expand"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <h6> <a class="reset-anchor" href="/ShopBook/Detail?id=@bookInfo.Id">@bookInfo.BookName</a></h6>
                                <p class="small text-muted">￥@bookInfo.Price</p>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</section>
<!--  Modal -->
<div class="modal fade" id="productView" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content overflow-hidden border-0">
            <button class="btn-close p-4 position-absolute top-0 end-0 z-index-20 shadow-0" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            <div class="modal-body p-0">
                <div class="row align-items-stretch">
                    <div class="col-lg-6 p-lg-0">
                        <a class="product-view d-block h-100 bg-cover bg-center" id="productViewPicture" onclick="ShowPicture()" style="background: url(http://localhost:5086/uploads/product-5.jpg)" href="http://localhost:5086/uploads/product-5.jpg" data-gallery="gallery1" data-glightbox="Red digital smartwatch"></a>
                    </div>
                    <div class="col-lg-6">
                        <div class="p-4 my-md-4">
                            <h2 class="h4" id="productViewName">Red digital smartwatch</h2>
                            <p class="text-muted" id="productViewPrice">$250</p>
                            <p class="text-sm mb-4" id="productViewDetail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut ullamcorper leo, eget euismod orci. Cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus. Vestibulum ultricies aliquam convallis.</p>
                            <input id="inventory" value="0" hidden/>
                            <form action="/Cart/AddCart" method="post">
                                <input name="bookId" id="Id" hidden />
                                <div class="row align-items-stretch mb-4 gx-0">
                                    <div class="col-sm-7">
                                        <div class="border d-flex align-items-center justify-content-between py-1 px-3">
                                            <span class="small text-uppercase text-gray mr-4 no-select">份数</span>
                                            <div class="quantity">
                                                <button type="button" class=" p-0" onclick="downTimes()"><i class="fas fa-caret-left"></i></button>
                                                <input id="time" class="form-control border-0 shadow-0 p-0" name="time" type="text" value="1" required>
                                                <button type="button" class=" p-0" onclick="addTimes()"><i class="fas fa-caret-right"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-5">
                                        <button type="submit" class="btn btn-dark btn-sm w-100 h-100 d-flex align-items-center justify-content-center px-0">添加到购物车</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    
    function setModalValues(Id, BookName, Picture, BookDetail, Price, Inventory) {
        document.getElementById('productViewPicture').style.backgroundImage = 'url("' + Picture + '")';
        document.getElementById('productViewPicture').href = Picture;
        document.getElementById('productViewPrice').textContent = "¥" + Price;
        document.getElementById('productViewDetail').textContent = BookDetail;
        document.getElementById('time').value = 1;
        document.getElementById('productViewName').textContent = BookName;
        document.getElementById('Id').value = Id;
        document.getElementById('inventory').value = Inventory;
    }

    
</script>
<script>
    const inputElement = document.getElementById('time');

    function restrictInput(event) {
        // 获取当前输入值
        let currentValue = inputElement.value.replace(/^0+(?=[1-9])/, '');
        let maxValue = Number(document.getElementById('inventory').value);
        if (/^\d+$/.test(currentValue) && parseInt(currentValue, 10) > 0) {
            if (currentValue > maxValue) {
                document.getElementById('time').value = maxValue;
            }
        }
        else {
            document.getElementById('time').value = ''
        }

    }
    function downTimes() {
        let currentValue = parseInt(document.getElementById('time').value.replace(/^0+(?=[1-9])/, ''), 10); // 获取当前值并转换为整数
        let minValue = 1; // 设置最小值，可以根据需要调整

        // 检查当前值是否有效且大于最小值
        if (!isNaN(currentValue) && currentValue > minValue) {
            // 减少当前值
            document.getElementById('time').value = currentValue - 1;
        } else {
            // 如果当前值无效或已经达到最小值，则不做任何操作或显示错误消息
            document.getElementById('time').value = 1;
            // 如果需要，可以在这里添加逻辑来显示一个提示或错误消息给用户
        }
    }
    function addTimes() {
        let currentValue = parseInt(inputElement.value, 10); // 确保转换为整数
        let maxValue = parseInt(document.getElementById('inventory').value, 10); // 确保转换为整数
        console.log('Current value:', currentValue);
        console.log('Max value:', maxValue);

        if (!isNaN(currentValue) && !isNaN(maxValue)) { // 检查值是否都是数字
            if (currentValue >= maxValue) { // 使用 >= 来确保当值等于最大值时不再增加
                document.getElementById('time').value = maxValue;
            } else {
                document.getElementById('time').value = currentValue + 1;
            }
        } else {
            console.error('Invalid values for current or max value');
        }
    }
    // 监听输入框的输入事件
    inputElement.addEventListener('input', restrictInput);
</script>